<template>
  <a-modal
    :title="form.id ? '修改' : '新增'"
    width="800px"
    v-model="visible"
    @ok="submit"
    :afterClose="closeModal"
    :destroyOnClose="true"
    :confirmLoading="btnLoading"
  >
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
      <a-form-model-item label="分类名称" prop="name">
        <a-input placeholder="" v-model="form.name" allowClear />
      </a-form-model-item>
      <a-form-model-item label="分类排序" prop="sort">
        <a-input-number v-model="form.sort" :precision="0" :min="0"></a-input-number>
      </a-form-model-item>
      <a-form-model-item label="分类状态" prop="is_show">
        <a-radio-group v-model="form.is_show">
          <a-radio :value="1"> 显示 </a-radio>
          <a-radio :value="0"> 禁用 </a-radio>
        </a-radio-group>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { cateSave } from '@/api/marketing/serviceHome'

export default {
  props: {
    params: {
      type: Object,
      default() {
        return {}
      },
    },
  },

  data() {
    return {
      visible: false,
      btnLoading: false,
      form: {
        name: '',
        sort: 0,
        is_show: 1,
      },
      rules: {
        name: [{ required: true, message: '请填写', trigger: 'blur' }],
        sort: [{ required: true, message: '请填写', trigger: 'blur' }],
        is_show: [{ required: true, message: '请选择', trigger: 'change' }],
      },
    }
  },

  methods: {
    open(form) {
      if (form) {
        this.form = form
      }

      this.visible = true
    },

    submit() {
      this.$refs['ruleForm'].validate(async (valid) => {
        if (valid) {
          const hide = this.$message.loading('加载中', 0)

          this.btnLoading = true
          let res = await cateSave(this.form)
          hide()
          this.btnLoading = false

          if (res.code == 0) {
            this.$message.success('操作成功')
            this.visible = false
            this.form = {
              name: '',
              sort: 0,
              is_show: 1,
            }
            this.$emit('callback')
          } else {
            this.$message.error(res.msg)
          }
        } else {
          return false
        }
      })
    },

    closeModal() {
      this.$refs['ruleForm'].resetFields()
    },

    handle(type, item) {
      switch (type) {
        case 'open':
          this.$refs[item].visible = true
          break
      }
    },

    select(el, e) {
      switch (el) {
        case 'front_agent_admin_id':
          this.form.front_agent_admin_id = e.id
          this.front_agent_admin_name = e.name
          break

        case 'supplier_id':
          this.form.supplier_id = e.supplier_info.id
          this.supplier_name = e.supplier_name
          break
      }
    },
  },
}
</script>
<style lang="less" scoped>
.flex {
  display: flex;
  .inp {
    flex: 1;
    overflow: hidden;
    margin-left: 16px;
  }
}
</style>
